<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    w: {
      // 1. 类型校验
      type: Number,
      // 2. 非空校验
      // required: true,
      // 3. 默认值
      // 设置默认值, 如果传递了用传递的, 如果没有传递则用默认值
      // 小细节: required 和 default互斥, 只要出现一个即可
      default: 20,
      // 4. 自定义校验
      /**
        1. 函数内 return true则代表校验通过
        2. 函数内 不返回 或者 return false 则代表校验不通过
        3. 属性接收的值会作为参数传递给校验函数
       */
      validator(value) {
        // console.log(value);
        if (value >= 0 && value <= 100) {
          // console.log("自定义校验通过");
          return true;
        } else {
          console.error("输入的值得在0~100之间");
          return false;
        }
      },
    },
  },
};
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>